import React from "react";
// 引入Tabber组件
import Tabber from "@/components/Tabber"

const Home = () => {
    const [houseList, setHouseList] = React.useState([])
    const [couponList, setcouponList] = React.useState([])
    const [hasMore, setHasMore] = React.useState(true)
    const [page, setPage] = React.useState(1)
    const [keyword,setKeyword] = React.useState("")
    const [order,setOrder] = React.useState("esc");
    const limit = 10
    React.useEffect(() => {
        onRefresh()
        getCoupon()
    }, [])
    // 下拉刷新
    const onRefresh = async () => {
        setHasMore(true)
        setPage(1)
        setHouseList([])
        loadMore()
    }
    // 上拉加载
    const loadMore = async () => {
        let result = await React.HTTP.post("/home/house", { page, limit,keyword,order })
        if (result.code == 1) {
            setHasMore(true)
            setPage(page + 1)
            setHouseList(houseList.concat(result.data))
        } else {
            setHasMore(false)
            return false
        }
    }
    // 搜索
    const search = (e:any) =>{
        e.preventDefault()
        onRefresh()
    }
    // 改变排序
    const changeOrder = (e:any) =>{
        if(order == "esc"){
            setOrder("desc")
        }else{
            setOrder("esc")
        }
        onRefresh()
    }
    // 获得优惠券信息
    const getCoupon = async () => {
        let result = await React.HTTP.post("/home/coupon")
        if(result.code){
            setcouponList(result.data)
            return false
        }else{
            React.error(result.msg)
            return false
        }
    }
    // 去优惠券详情界面
    const coupon = (id:number,e:any) => {
        React.navigate(`/coupon/info?cid=${id}`)
    }
    return (
        <>
            {/*引入样式*/}
            <link rel="stylesheet" href="/assets/css/index.css" />
            <link rel="stylesheet" href="/assets/css/swiper-bundle.min.css" />
            {/*导航 */}
            <div className="top">
                <div>首页</div>
            </div>
            {/* 轮播图的优惠券 */}
            {
                couponList.length?    
                (<React.UI.Swiper loop autoplay style={{ height: "213px" }}>
                {
                    couponList.map((item:any, index) => {
                        return (
                            <React.UI.Swiper.Item key={item.id} onClick={coupon.bind(this,item.id)}>
                                <img style={{height:213}} src={item.thumb_text} alt="" />
                            </React.UI.Swiper.Item>
                        )
                    })
                }
            </React.UI.Swiper>):""
            }
       
            <form className="hotel_search" onSubmit={search}>
                <input type="text" name="keyword" placeholder="请输入关键词搜索" value={keyword} onChange={(e)=>setKeyword(e.target.value)}/>
                <div className="screen_icon" onClick={changeOrder}>
                    <img src="/assets/images/screen.png" alt="" />
                </div>
            </form>

            <div className="hotellist">
                <React.UI.PullToRefresh onRefresh={onRefresh}>
                    {
                        (houseList.map((item: any, index: any) => {
                            return (
                                <div className="item" key={item.id}>
                                    <React.Router.Link to={"/room/info?rid="+item.id}>
                                        <div className="type_name">新房特惠</div>
                                        <div className="images">
                                            <div className="swipers">
                                                <img src={item.thumb_text} alt="" />
                                            </div>
                                            <div className="title">{item.name}</div>
                                        </div>
                                        <div>
                                            <div className="item_top">
                                                <span>推广优惠</span>
                                                <span>月租惠选</span>
                                                <span>满减优惠</span>
                                                <span>节假日优惠</span>
                                            </div>
                                            <div className="item_bot">
                                                <div className="font">
                                                    <span className="price">￥{item.price}/晚</span>
                                                    <span className="market_price">￥80.00/晚</span>
                                                </div>
                                                <div className="btn">立即预定</div>
                                            </div>
                                        </div>
                                    </React.Router.Link>
                                </div>
                            )
                        }))
                    }
                    <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                </React.UI.PullToRefresh>
            </div>
            <div style={{ height: '55px' }}></div>

            <Tabber />

        </>
    )
}

export default Home